<template>
  <div>
      <h1 align="center">消息通知</h1>
      <van-row>
        

        <van-col>
              标题：<input type="text">&emsp;&emsp;  <van-button><van-icon name="search" /> 
              查询 </van-button> &emsp;&emsp;
              <van-button  @click="tianjia" style="width: 100px;background-color: aqua;border: 1px"><van-icon name="replay" /> 重置 </van-button>     <br><br>

             <van-button  @click="dialogVisible = true">+ 增加</van-button> &emsp;
              <van-button><van-icon name="delete-o" /> 删除 </van-button> &emsp;
              <van-button><van-icon name="down" /> 导出 </van-button> &emsp;
              <van-button> <van-icon name="arrow-left" />导入 </van-button> &emsp;
        </van-col>
         <el-dialog v-model="dialogVisible" title="Warning" width="90%" center>
           <van-row>
             <van-col span="10">
              
              <div>
                <el-form>
                  <el-form-item label="标题" style="padding-left: 30px" v-model="form.title">
                    <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                  </el-form-item>

                  <el-form-item label="开始时间">
                    <el-date-picker v-model="form.stime" type="date" placeholder="请选择时间"  style="width: 400px;" value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="优先级" style="padding-left: 15px"> 
                    <el-select v-model="form.priority" placeholder="please select your zone"  style="width: 400px;">
                      <el-option label="低" value="1"></el-option>
                      <el-option label="中" value="2"></el-option>
                      <el-option label="高" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </van-col>

            <van-col>
              <div style="padding-left: 100px">
                <el-form>
                  <el-form-item label="消息类型">
                    <el-select v-model="form.messagetype" placeholder="please select your zone" style="width: 400px" >
                      <el-option label="体统消息" value="1"></el-option>
                      <el-option label="通知公告" value="2"></el-option>
                     
                    </el-select>
                  </el-form-item>

                  <el-form-item label="结束时间">
                    <el-date-picker v-model="form.etime" type="date" placeholder="请选择时间" style="width: 400px" value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="通告类型" v-model="type">
                    <el-select v-model="form.type" placeholder="please select your zone" style="width: 400px">
                      <el-option label="通知用户" value="1" >

                        <van-cell is-link @click="showPopup"><span @click="getdept">通知用户</span></van-cell>
                          <van-popup v-model:show="show" position="top">
                          <el-tree show-checkbox :data="data" :props="defaultProps"  @check="select"></el-tree>
                          <van-button @click="confirm">确认</van-button>
                          </van-popup>

                      </el-option>
                      <el-option label="通知部门" value="2"></el-option>

                          



                      <el-option label="通知所有人" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>        
            </van-col>
           </van-row>
            <div>
                   内容
                   <Uedit v-model="form.content" />
            </div>
              <template #footer>
                    <span class="dialog-footer">
                        <button >取消</button>
                        <button @click="add">确认</button>
                        
                    </span>
                    </template>


       </el-dialog>
       </van-row>
  </div>
</template>

<script>
import { ref } from 'vue';
import myaxios from "../components/http/axios"
import Uedit from "../components/TEditor.vue"
export default {
  components: {
          Uedit,
        },
    setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
  data(){
    return{
       dialogVisible:false,
       form:{title:'',stime:'',priority:'',messagetype:'',etime:'',type:'',content:'',notive:[]},
        defaultProps:{
        children:'children',
        label:'name'
      },
      data:[],
      lists:[],
    }
  },
  methods:{
      confirm(){
      let lst = []
      for(var i=0;i<this.lists.length;i++){
        if(this.lists[i]){
          lst.push(this.lists[i])
        }
        console.log(lst);
        this.form.notive = lst
      }

    },
    select(val){
       this.lists.push(val['rid'])
       console.log(this.lists);
    },

    add(){
      myaxios('addmessage','post',this.form).then(res=>{
        console.log(res);
      })
    },
      getdept(){
        myaxios('getdept','get').then(res=>{
          this.data = res.list
        })
      },
  },
  mounted(){
    this.getdept()
  }

 

}
</script>

<style>

</style>